<template>
  <div>
    <div class="login_content">
      <div class="login">
        <div class="login_header">
          <div @click="choose(0)"><a href="javascript:;" :class="{'active':0===selected}">客户登入专区</a></div>
          <div @click="choose(1)"><a href="javascript:;" :class="{'active_two':1===selected}">登录IB专区</a></div>
        </div>
        <component :is="currentView" transition="fade" transition-mode="out-in"></component>
      </div>
    </div>
  </div>
</template>

<script>
  import  tab_1 from './klogin.vue';
  import  tab_2 from './iblogin.vue';
  export default{
      data(){
          return{
            currentView:'view_0',
            selected: 0
          }
      },
      methods:{
        choose(index){
          this.selected = index;
          this.currentView = 'view_' + index;
        }
      },
      computed:{
        gameLength(){
          return !tool.isEmptyObj(this.recordData);
        }
      },
      components:{
        'view_0':tab_1,
        'view_1':tab_2
      }
  }
</script>

<style scoped>
  .login_content{
    position: relative;
    width: 100%;
    height: 613px;
  }
  .login{
    width: 528px;
    height: 350px;
    background: #fff;
    box-shadow: 0px 20px 50px rgba(0,0,0,0.2);
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin:auto;
    padding:24px 80px 0px;
    box-sizing: border-box;
  }
  .login_header{
    display: flex;
    height: 26px;
  }
  .login_header > div{
    flex: 1;
    color: #cfcfcf;
    font-size: 16px;
  }
  .login_header > div a{
    color: #cfcfcf;
    font-size: 16px;
  }
  .login_header > div:nth-child(1){
    background: url("./images/two.png") no-repeat left bottom;
  }
  .login_header > div:nth-child(2){
    text-align: right;
    background: url("./images/two.png") no-repeat right bottom;
  }
  .login_header > div a.active{
    height: 26px;
    display: block;
    color: #4170cf;
    background: url("./images/one.png") no-repeat left bottom;
  }
  .login_header > div a.active_two{
    height: 26px;
    display: block;
    color: #4170cf;
    background: url("./images/one.png") no-repeat right bottom;
  }
</style>
